<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="w-full min-h-[calc(100vh-360px)] bg-[#F6F9FE] pt-5 pb-12">
    <section class="w-full max-w-300 mx-auto flex flex-col lg:flex-row gap-5 items-start">
      <div class="w-full lg:w-75 p-0 md:p-3 lg:p-7 rounded-lg bg-white">
        <p class="hidden lg:block text-xl mb-8" style="font-family: 'MiSans-Demibold'">圖書類目</p>
        <a-menu
          v-model:openKeys="openKeys"
          v-model:selectedKeys="selectedKeys"
          :mode="isMobile ? 'horizontal' : 'inline'"
          :items="libraryCateList"
          @click="handleClick"
        ></a-menu>
      </div>
      <div class="w-full lg:flex-1 p-5 rounded-lg bg-white">
        <!-- 搜索 -->
        <div class="mb-2">
          <a-input v-model:value="keyword" placeholder="請輸入标题查询" @pressEnter="handleSearch">
            <template #prefix>
              <img src="../../assets/images/search.png" alt="search" class="size-6 mr-2" />
            </template>
            <template #suffix>
              <a-button type="primary" @click="handleSearch">查询</a-button>
            </template>
          </a-input>
        </div>
        <!-- 图书列表 -->
        <ul class="w-full" v-if="total > 0">
          <li
            class="py-5 border-b-solid border-b-[1px] border-b-[#DADFE6] flex flex-col lg:flex-row items-end lg:items-center justify-between"
            v-for="book in libraryBookList"
            :key="book.title + book.id"
          >
            <div class="w-full flex flex-col lg:flex-row items-center gap-5">
              <img
                :src="book.cover_img"
                alt=""
                class="w-full h-auto lg:w-30 lg:h-24 object-cover rounded-md"
              />
              <div class="w-full">
                <p class="ellipsis text-[18px] font-[MiSans-Demibold] mb-1">
                  {{ book.title }}
                </p>
                <p class="ellipsis text-base text-[#7B7D85] font-[MiSans-Demibold] mb-1">
                  {{ book.ps }}
                </p>
                <p class="text-[#7B7D85]">{{ book.create_time }}</p>
              </div>
            </div>
            <img
              src="../../assets/images/arrow-right.png"
              class="size-6 cursor-pointer hover:scale-110"
              alt=""
              @click="goDetail(book.id)"
            />
          </li>
        </ul>
        <div class="py-15" v-else>
          <a-empty />
        </div>
        <div class="pt-10 flex items-center justify-end" v-if="total > 10">
          <p class="mr-5 text-sm hidden lg:block">每页 10 条</p>
          <a-pagination :total="total" :page-size="10" show-quick-jumper />
        </div>
      </div>
    </section>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { theme } from 'ant-design-vue'
import { libraryCateApi, libraryBookListApi } from '@/api'
import type { MenuProps } from 'ant-design-vue'
import type { LibraryCateType, LibraryBookDetailType } from '@/api/type'
const { token: themeToken } = theme.useToken()
const router = useRouter()

const selectedKeys = ref<string[]>(['1'])
const openKeys = ref<string[]>(['library1'])
const keyword = ref<string>('')
const page = ref(1)
const total = ref(0)

const libraryCateList = ref<LibraryCateType[]>([])
const libraryBookList = ref<LibraryBookDetailType[]>()

// 点击分类
const handleClick: MenuProps['onClick'] = (e) => {
  const cateId = e.item.id as string
  page.value = 1
  getLibraryBookList(cateId)
}
const isMobile = ref(false)

// 获取图书分类列表
const getLibraryCateList = () => {
  libraryCateApi().then((res) => {
    const list = res.data
    list.forEach((item) => {
      item.id = 'id_' + item.id
      item.key = 'key_' + item.key
      if (item.children?.length) {
        item.children.forEach((child) => {
          child.id = 'id_' + child.id
          child.key = 'key_' + child.key
        })
      }
    })
    libraryCateList.value = list
    openKeys.value = [libraryCateList.value[0]?.key || '']
    selectedKeys.value = [libraryCateList.value[0]?.children?.[0]?.key || '']
    getLibraryBookList(selectedKeys.value[0] || '')
  })
}

// 获取图书列表
const getLibraryBookList = (cateId: string) => {
  if (!cateId) {
    return
  }
  const id = cateId.split('_')[1] as string
  const params = {
    cate_id: id,
    keywords: keyword.value,
    page: page.value,
    page_size: 10,
  }
  libraryBookListApi(params).then((res) => {
    console.log(res.data)
    libraryBookList.value = res.data.data
    total.value = res.data.total || 0
  })
}

// 搜索图书
const handleSearch = () => {
  page.value = 1
  getLibraryBookList(selectedKeys.value[0] || '')
}

// 点击图书详情
const goDetail = (id: string) => {
  router.push({ name: 'library-details', params: { id } })
}

const onResize = () => {
  const w = window.screen.width
  if (w < 768) {
    isMobile.value = true
  } else {
    isMobile.value = false
  }
}
onMounted(() => {
  onResize()
  getLibraryCateList()
  window.addEventListener('resize', onResize)
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', onResize)
})
</script>

<style scoped>
:deep(.ant-menu) {
  border: none !important;
}
:deep(.ant-menu-sub.ant-menu-inline) {
  background-color: transparent !important;
}

:deep(.ant-menu-item-active) {
  background-color: v-bind('themeToken.colorPrimaryBgHover') !important;
}

:deep(.ant-input-affix-wrapper) {
  height: 48px;
  font-size: 16px !important;
  border-radius: 10px;
  /* border-color: #dadfe6 !important; */
}

:deep(.ant-pagination-item-active) {
  background-color: v-bind('themeToken.colorPrimary') !important;
}

:deep(.ant-pagination-item-active a) {
  color: #fff !important;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 768px) {
  :deep(.ant-menu-submenu) {
    padding: 0 5px !important;
  }
  :deep(.ant-menu-title-content) {
    font-size: 12px !important;
  }
}
</style>
